<template lang="pug">
  .m-content
    .cloud-header 工单详情
    .order-main
      .subtitle {{ baseInfo.platformParams&&JSON.parse(baseInfo.platformParams).requestId }}
      el-tabs(v-model="activeName" type="border-card")
        el-tab-pane(label="基本信息" name="first")
          table.baseInfo
            tr
              td 工单ID
              td {{ baseInfo.platformParams&&JSON.parse(baseInfo.platformParams).requestId | filtersEmpty }}
            tr
              td bizid
              td {{ baseInfo.bizid | filtersEmpty }}
            tr
              td 成员接入号
              td {{ baseInfo.platformId | filtersEmpty }}
            tr
              td 组合接入号
              td {{ baseInfo.combinationTag | filtersEmpty }}
            tr
              td 请求ID
              td {{ baseInfo.platformParams&&JSON.parse(baseInfo.platformParams).requestId | filtersEmpty}}
            tr
              td 产品类型
              td {{ hasDictionaryValue('productType',baseInfo.productType) | filtersEmpty }}
            tr
              td 动作类型
              td {{hasDictionaryValue('action',baseInfo.action) | filtersEmpty}}
            tr
              td 状态
              td {{hasDictionaryValue('state',baseInfo.state) | filtersEmpty}}
            tr
              td 创建时间
              td {{ formatTime(baseInfo.createAt) | filtersEmpty}}
            tr
              td 回单时间
              td {{ formatTime(baseInfo.returnAt) | filtersEmpty}}
            tr
              td 工单用时
              td  {{orderUseTime | filtersEmpty}}
            tr
              td 退单码
              td {{ baseInfo.failCode | filtersEmpty}}
            tr
              td 异常信息
              td {{baseInfo.failMessage | filtersEmpty}}
            tr
              td 处理意见
              td {{baseInfo.opinion | filtersEmpty }}
            tr
              td 操作人姓名
              td {{baseInfo.callerName | filtersEmpty}}
            tr
              td 操作人用户名
              td {{baseInfo.callerAccount    | filtersEmpty}}
            tr
              td 操作时间
              td {{formatTime(baseInfo.callerAt) | filtersEmpty}}
        el-tab-pane(label="oss工单信息" name="second")
          el-button(type="primary"  icon="iconfont icon-chaxun1" @click="_exportoss($route.params&&$route.params.id)") 导出
          whole-row(:data="ossInfo")
        el-tab-pane(:label="orderTypes[item]" :name="item" v-for="item in moreInfosKey"  :key="item")
          el-button(type="primary"  icon="iconfont icon-chaxun1" @click="_exportctyun($route.params&&$route.params.id,item)") 导出
          whole-row(:data="moreInfos[item]")

</template>
<script>
import WholeRow from '@/components/wholeRow'
import { dutime, diff } from '@/utils/index'
import {
  orderBaseInfo,
  ossInfo,
  moreInfo,
  exportoss,
  exportctyun
} from '@/api/order.js'
import {
  productTypes,
  areaCodes,
  actions,
  states,
  orderTypes
} from '@/utils/config'
export default {
  data () {
    return {
      activeName: 'first',
      baseInfo: {},
      ossInfo: [],
      moreInfos: [],
      moreInfosKey: [],
      ctShowing: true,
      productTypes,
      orderTypes,
      active: false
    }
  },
  components: {
    WholeRow
  },
  created () {
    const id = this.$route.params && this.$route.params.id
    this.getorderBaseInfo(id)
    this.getossInfo(id)
    this.getmoreInfo(id)
  },
  computed: {
    orderUseTime: function () {
      let startTime = this.baseInfo.createAt
      let endTime = this.baseInfo.returnAt
      if (startTime && endTime) {
        let label = dutime.call(this, startTime, endTime)
        return label
      }
      return '--'
    }
  },
  filters: {
    filtersEmpty (value) {
      if (value === 0) {
        return value
      }
      return value || '--'
    }
  },
  methods: {
    getorderBaseInfo (id) {
      orderBaseInfo(this.$http, id).then(res => {
        this.baseInfo = res.data && res.data.data && res.data.data.order
        let { message } = res.data && res.data.data
        let { callerName, callerAccount, callerAt } = message
        this.baseInfo = { ...this.baseInfo, callerName, callerAccount, callerAt }
      })
    },
    getossInfo (id) {
      ossInfo(this.$http, id).then(res => {
        this.ossInfo = res.data.data
      })
    },
    getmoreInfo (id) {
      moreInfo(this.$http, id).then(res => {
        this.moreInfos = res.data.data.items
        let arr = Object.keys(res.data.data.items)
        this.moreInfosKey = arr.sort(diff)
      })
    },
    hasDictionaryValue (array, cond) {
      // 有些数据暂时没用到 后面考虑删除
      const dictionary = {
        productType: productTypes,
        areaCode: areaCodes,
        action: actions,
        state: states
      }
      if (dictionary[array] && dictionary[array].length) {
        const stateArr = [0, 10]
        if (array.toString() === 'state' && cond && stateArr.indexOf(cond - 0) === -1) {
          return '在途'
        }
        const obj = dictionary[array].filter(
          v => v.value === cond || v.value === cond + ''
        )[0]
        return obj && obj.label
      } else {
        return cond
      }
    },
    fromatDesc (val) {
      if (val) {
        let arr = val.split('\n')
        let str = ''
        arr.map(v => { str += v.trim() })
        return str
      } else {
        return '--'
      }
    },
    _exportoss (id) {
      window.location.href = exportoss(id)
    },
    _exportctyun (id, type) {
      window.location.href = exportctyun(id, type)
    },
    formatTime (val) {
      return val && this.$moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}

</script>
<style lang="stylus" scoped>
.m-content
  font-size 12px
  overflow hidden
  .cloud-header
    height 40px
    line-height @height
    padding 0 20px
    border-bottom 1px solid #e8e8e8
    color #333
  .order-main
    margin 23px
    .subtitle
      margin-bottom 15px
    .el-tabs
      box-shadow none
      border 0
      >>>
        .el-tabs__header
          border 0
        .el-tabs__item
          margin 0 -1px -1px
          height 35px
          line-height 35px
        .is-active
          border-color #1f60bd transparent transparent transparent
        .el-tabs__content
          padding 0
          margin-top 20px
        .el-button
          margin-bottom 15px
    .baseInfo
      width: 100%;
      tr
        td
          border: 1px solid #dee6eb;
          padding: 12px;
          // word-break break-all
          &:nth-of-type(1)
            width: 120px;
            background: #f7fafd
    .empty
      text-align center
      margin 15px 0
      color #909399
</style>
